<template>
  <div>
    <div class="wrapper">
      <div class="home-join-slides">
        <el-carousel trigger="click" height="312px">
          <el-carousel-item
            v-for="comment in comments"
            :key="comment.id">
            <div
              class="bg"
              :style="{ backgroundImage: `url(${comment.pic})` }"
            >
              <div class="message">
                <div class="message-title">{{ comment.title }}</div>
                <div class="message-content">{{ comment.content }}</div>
                <div class="message-content two">{{ comment.two }}</div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="ttq">
        <div class="ttq-title">
          <h3 class="A">欢迎关注卷叔填填圈</h3>
        </div>
        <img class="ttp-ewm" src="https://wj.qq.com/image/ttq-qrcode@2x.png" alt="" />
        <div class="ttp-search">公众号搜索“卷叔填填圈”</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comments: [
        {
          id: 1,
          title: '在校学生',
          content: '轻松赚取',
          two: '奖励红包和惊喜礼物',
          pic: 'https://wj.qq.com/image/pc/act/join_1@2x.jpg',
        },
        {
          id: 2,
          title: '企业管理者',
          content: '优先获得',
          two: '腾讯问卷行业报告',
          pic: 'https://wj.qq.com/image/pc/act/join_2@2x.jpg',
        },
        {
          id: 3,
          title: '自由职业者',
          content: '亲自参与',
          two: '产品优化与迭代',
          pic: 'https://wj.qq.com/image/pc/act/join_3@2x.jpg',
        },
      ],
    };
  },
};
</script>

<style scoped>
@font-face {
  font-family: ttq;
  src: url('../assets/fontmin2.ttf');
}

.wrapper {
  width: 1038px;
  height: 310px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #dddddd;
}

.home-join-slides {
  width: 745px;
}

.bg {
  height: 100%;
  background-size: cover;
}

.message {
  padding-top: 70px;
  margin-left: 40px;
}

.message-title {
  font-size: 18px;
  color: #fff;
  margin-bottom: 40px;
  line-height: 1px;
}

.message-content {
  width: 342px;
  height: 104px;
  font-size: 38px;
  color: #fff;
}

.two {
  margin-top: -50px;
}

.ttq {
  width: 293px;
  height: 312px;
  text-align: center;
}

.ttq-title{
  width: 180px;
  height: 34px;
  border-radius: 4px;
  background-color: #f63a59;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  margin-bottom: 15px;
  line-height: 34px;
}

.A {
  font-family: ttq;
  font-weight: normal;
  color: #fff;
}

.ttp-ewm {
  width: 180px;
}

.ttp-search {
  color: #f63a59;
}
</style>

<style>
.home-join-slides .el-carousel__button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.home-join-slides .el-carousel__indicators {
  width: 745px;
  height: 18px;
  margin-left: 40px;
  bottom: 40px;
}
</style>
